<template>
  <div class="Shopping">
    <el-container>
		<el-header style="height: 230px;">
				<div class="container" style="height:210px; width: 1524px;">
					<div class="header-wrap" style="height: 100px; width: 1524px;">
						<div class="logo-left">
							<a href="#">
								<img style="height: 80px;" src="@/assets/imgs/theme/logo.png" alt="logo" />
							</a>
						</div>
						<div class="header-right">
							<div class="header-right-input">
								<template>
									<el-select @change="sortProduct(selectvalue)" v-model="selectvalue" filterable
										placeholder="请选择">
										<el-option v-for="item in options" :key="item.id" :label="item.productTypeName"
											:value="item.id">
										</el-option>
									</el-select>
								</template>
								<el-input style="width: 500px;" v-model="input" placeholder="请输入内容"></el-input>
								<el-button type="primary" id="w" @click="selectProduct">查询</el-button>
							</div>
							<div class="header-right-icon">
								<el-badge :value="12" class="item" type="success">
									<a href="#"><i class="el-icon-star-off"></i></a>
								</el-badge>
								<label>收藏</label>
								<!-- @click="gerenzhongxin" -->
								<router-link to="/homepage"><i
										class="el-icon-user"></i></router-link><label>主页</label>
										<router-link to="/Shopping"><i
										class="el-icon-shopping-cart-2"></i></router-link><label>购物车</label>

							</div>
						</div>
					</div>
					<div class="header-wrap-2">
						<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
							@select="handleSelect">
							<el-menu-item index="1">处理中心</el-menu-item>
							<el-submenu index="2">
								<template slot="title">商品类型1</template>
								<el-menu-item index="2-1">商品类型1</el-menu-item>
								<el-menu-item index="2-2">商品类型2</el-menu-item>
								<el-menu-item index="2-3">商品类型3</el-menu-item>
								<el-submenu index="2-4">
									<template slot="title">商品类型4</template>
									<el-menu-item index="2-4-1">选项1</el-menu-item>
									<el-menu-item index="2-4-2">选项2</el-menu-item>
									<el-menu-item index="2-4-3">选项3</el-menu-item>
								</el-submenu>
							</el-submenu>
							<el-menu-item index="3" disabled>导航1</el-menu-item>
							<el-menu-item index="4">导航2</el-menu-item>
							<el-menu-item index="5">导航3</el-menu-item>
							<el-menu-item index="6">导航4</el-menu-item>
							<el-menu-item index="7">导航5</el-menu-item>
							<el-submenu index="8">
								<template slot="title">导航6</template>
								<el-menu-item index="2-1">商品类型1</el-menu-item>
								<el-menu-item index="2-2">商品类型2</el-menu-item>
								<el-menu-item index="2-3">商品类型3</el-menu-item>
							</el-submenu>
							<el-menu-item index="9"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
						</el-menu>
						<div class="header-wrap-2-right hotline">
							<img style="width: 45px; margin-right: 8px;" src="@/assets/imgs/theme/daohang.png" alt="" />
							<p class="header-wrap-2-right-p">1900 - 888</p>
							<span class="header-wrap-2-right-span">24/7 Support Center</span>
						</div>
					</div>

				</div>


			</el-header>
	</el-container>
	
    <!-- 网页端样式  -->
    <div v-if="!isMobile" class="cart-web">
      <!-- 导航栏 
		左边logo 右边搜索 
		内容 单栏购物车  -->
      <div class="cart-contain">
        <div class="cart-table-container">
          <div class="cart-filter-bar">
            <span class="switch-cart">购物车（全部{{ cartTotalCount }}）</span>
            <!-- <div class="cart-sum" style="display: none">
              <span class="pay-text">已选商品</span>
              <span class="total-symbol">{{ cartTotalPrice }}</span>
              <div class="pay-btn inactive-btn">结算</div>
            </div> -->
          </div>
          <div class="cart-list-content">
            <el-table ref="cartTable" :data="cartList" v-loading="loading" size="mini"
              style="width: 95%; margin: 0 auto" v-on:selection-change="handleSelectionChange">
              <el-table-column type="selection" align="center" width="50"></el-table-column>
              <el-table-column label="商品图片" width="180">
                <template slot-scope="scope">
                  <el-image :src="scope.row.image" style="width: 120px; height: 120px">
                    <div slot="placeholder" class="image-slot">
                      Loading<span class="dot">...</span>
                    </div>
                    <div slot="error" class="image-slot">
                      <el-image style="width: 120px; height: 120px"
                        src="product.imgUrl"></el-image>
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column label="商品名称" prop="product.productName"></el-table-column>
              <el-table-column label="商品名称" prop="product.productDetail"></el-table-column>
              <el-table-column label="单价" prop="product.productPrice"></el-table-column>
              <el-table-column label="数量" width="220">
                <template slot-scope="scope">
                  <el-input-number setp="1" :min="1" v-model="scope.row.num" plain
                    v-on:change="calTotalPrice()"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="金额">
                <template slot-scope="scope">
                  <span>{{ scope.row.num * scope.row.product.productPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" align="center">
                <template slot-scope="scope">
                  <el-button size="medium" type="danger" v-on:click="delGood(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="cart-filter-bar-bottom">
            <div class="bar-bottom-left">
              <span class="all-check">
                <div>
                  <el-checkbox class="all-check-checkbox" v-model="isAllChecked" v-on:change="checkAll">全选</el-checkbox>
                </div>
              </span>
              <span class="all-del" v-show="isAllChecked">
                <el-button type="danger" size="small" v-on:click="delAll">删除</el-button>
              </span>
            </div>
            <div class="cart-sum">
              <span class="pay-text">已选商品</span>
              <span class="total-text">合计：</span>
              <span class="total-symbol">{{ cartTotalPrice }}</span>
              <div v-if="selectionData.length > 0" class="pay-btn-active" @click="goToCheckout">
                结算
              </div>
              <div v-else class="pay-btn-inactive" @click="goToCheckout">结算</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 移动端样式   -->
    <div v-else class="cart-phone">
      <!-- header  
		  购物车列表  
		  购物车操作栏   -->

      <div v-if="cartList.length !== 0">
        <div class="cart-box">
          <div v-for="(item, index) in cartList" :key="index" class="cart-list-item">
            <div class="cart-item-info">
              <div class="cart-item-left">
                <div class="left-check" v-on:click="checkCurrent(item)">
                  <div class="checkbox">
                    <div v-if="item.checked" class="selected-check"></div>
                    <div v-else></div>
                  </div>
                </div>
                <el-image :src="item.image">
                  <div slot="placeholder" class="image-slot">
                    Loading<span class="dot">...</span>
                  </div>
                  <div slot="error" class="image-slot">
                    <el-image fit="contain" style="height: 100px"
                      src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"></el-image>
                  </div>
                </el-image>
              </div>
              <div class="cart-item-right">
                <div class="cart-item-info-content">
                  <div class="goods-name">
                    {{ item.productName }}
                  </div>

                  <div class="numbers">
                    <div class="price">价格：{{ item.price * item.num }}</div>
                  </div>
                </div>
                <div class="cart-item-opera">
                  <el-input-number setp="1" :min="1" v-model="item.num" plain
                    v-on:change="calTotalPrice()"></el-input-number>
                </div>
              </div>
            </div>

            <div class="del-btn" v-on:click="delGood(item.id)">
              <span class="fa fa-trash-o"></span>
            </div>
          </div>
        </div>
        <!-- 全选 -->
        <div class="bottom-all">
          <div class="left">
            <div class="left-check">
              <el-checkbox class="all-check-checkbox" v-model="isAllChecked" v-on:change="checkAll">全选</el-checkbox>
            </div>
            <div class="del-text" v-show="isAllChecked" v-on:click="delAll">
              删除
            </div>
          </div>
          <div class="rights">
            合计：
            <span class="total-pay-count">{{ cartTotalPrice }}</span>
          </div>
          <div v-if="selectionData.length > 0" class="settlement-active">
            结算
          </div>
          <div v-else class="settlement-inactive">结算</div>
        </div>
      </div>
      <!-- 如果购物车没有数据 -->
      <div class="cart-no-data" v-if="cartList.length == 0">
        <div>没有数据</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "shopping",
  data() {
    return {
      //选中数据
      selectionData: [],
      // 购物车商品列表
      cartList: [],
      // 加载
      loading: false,
      // 购物车总数
      cartTotalCount: 0,
      // 购物车总价格
      cartTotalPrice: 0.0,
      // 是否是移动端
      isMobile: false,
      // 是否全选
      isAllChecked: false,
      //订单
      order:{},
      //订单明细
      orderDetail:[],
      carts:[],
      products:[],
      //111
      orderDetail2:[]
    };
  },
  created() {
    this.loadCartData();
  },
  mounted() {
    let _this = this;
    // 自适应
    _this.resizeLayout();
    window.onresize = function () {
      _this.resizeLayout();
    };
  },
  components: {},
  methods: {
    // 从后端获取购物车数据的方法
    async loadCartData() {
      try {
        // 从 sessionStorage 获取手推车数据
        const cartItemsFromStorage = JSON.parse(sessionStorage.getItem('cartItems'));
        console.log("A",cartItemsFromStorage)

        if (cartItemsFromStorage) {
          this.cartList = cartItemsFromStorage;
        }
        // 从后端接口获取最新的购物车数据
        // const response = await this.$http.get(`/buy/cart/load`);
        // this.cartList = response.data; // 更新状态为后端返回的最新数据
      } catch (error) {
        console.error('Error loading cart data:', error);
      }
    },
    async goToCheckout() {
      let orderDetails = []
      for(let i=0;i<this.selectionData.length;i++){
        orderDetails.push({
          productId:this.selectionData[i].product.productId,
          amount:this.selectionData[i].num,
          price:this.selectionData[i].product.productPrice,
          subtotal:this.selectionData[i].num * this.selectionData[i].product.productPrice,
        })
      }
      let totalAmount = 0
          for(let i=0;i<this.selectionData.length;i++){
            totalAmount += this.selectionData[i].num * this.selectionData[i].product.productPrice
          }
          let num = 0
          for(let i=0;i<this.selectionData.length;i++){
            num += this.selectionData[i].num 
          }
      let order = {
        userId: 2,
        totalAmount: totalAmount,
        orderNum: num,
        orderStatus:0,
        createTime:new Date(),
        updateTime:new Date(),
        amount:totalAmount,
        payStatus:"K002-1",
        orderDetails:orderDetails
      }
      console.log("order",order)

      const {data:res} = await this.$http.post("/buy/order/addOrderAll",order)
      console.log(1111,res)
      if(res=='ok'){
        this.$router.push("/Bear")
        let a= ''
        for(var i=0;i<this.selectionData.length;i++){
          a+=this.selectionData[i].id+"-"
        }

       const {data:res1} = await this.$http.post(`/buy/order/rmOrderAll/${a}`)
       console.log(987,a)
       let cartItems = sessionStorage.getItem('cartItems');
       let car = JSON.parse(cartItems)
       for(let j=0;j<this.selectionData.length;j++){
          for(let i=car.length-1;i<=0;i--){
              if(this.selectionData[j].id === car[i].id){
                car.splice(i,1)
              }
          }
        }
        sessionStorage.setItem('cartItems',car)
      }


    },
    // 选择当前商品
    checkCurrent(item) {
      let _this = this;
      // 如果商品是被勾选的
      if (item.checked) {
        // 从被选择数组中清除
        _this.selectionData.forEach((sItem, sIndex) => {
          if (sItem.id === item.id) {
            _this.selectionData.splice(sIndex, 1);
          }
        });
        // 勾选状态变为false
        _this.cartList.forEach((cItem, cIndex) => {
          if (cItem.id === item.id) {
            _this.cartList[cIndex]["checked"] = false;
          }
        });
      } else {
        // 如果商品是未被勾选的
        // 勾选状态变为true
        _this.cartList.forEach((cItem, cIndex) => {
          if (cItem.id === item.id) {
            _this.cartList[cIndex]["checked"] = true;
          }
        });
        // 添加到被选择数组中
        _this.selectionData.push(item);
      }
      // 如果被选择数组没有数据 则全选为false
      if (_this.selectionData.length <= 0) {
        _this.isAllChecked = false;
      }
      // 如果被选择数组数组长度和购物车数组长度相同 则全选为true
      if (_this.selectionData.length === _this.cartList.length) {
        _this.isAllChecked = true;
      }
      // 计算商品总价和总数量
      _this.calTotalPrice();
    },
    //响应式布局
    resizeLayout() {
      // 浏览器宽
      let width =
        document.documentElement.offsetWidth || document.body.offsetWidth;
      let height =
        document.documentElement.clientHeight || document.body.clientHeight;
      let _this = this;
      if (width > 700) {
        _this.isMobile = false;
      } else {
        _this.isMobile = true;
      }
    },

    // 初始化数据
    // initData() {
      // let _this = this;
      // _this.getList();
    // },
    // // 获取购物车列表
    // getList() {
    //   let _this = this;
    //   _this.cartList = [
    //     {
    //       id: "2142423",
    //       image: "",
    //       productName: "测试商品1",
    //       // 单价
    //       price: 12,
    //       // 购买数量
    //       num: 1,
    //       // 如果api返回的数据中没有类似checked这种判断是否选中的字段
    //       // 可以在获取收据后 初始化时遍历添加一遍
    //       checked: false,
    //     },
    //     {
    //       id: "2142423424",
    //       image: "",
    //       productName: "测试商品2",
    //       price: 32,
    //       num: 2,
    //       checked: false,
    //     },
    //   ];
    // },

    // 计算总价和总数量
    calTotalPrice() {
      let _this = this;
      _this.cartTotalPrice = 0;
      _this.cartTotalCount = 0;
      // 如果有选中项
      if (_this.selectionData.length > 0) {
        _this.selectionData.forEach((item) => {
          _this.cartTotalPrice += item.num * item.product.productPrice;
          _this.cartTotalCount += item.num;
        });
      }
    },
    // 控制选择商品
    handleSelectionChange(data) {
      this.selectionData = data;
      this.cartList.forEach((good) => {
        if (this.selectionData.length > 0) {
          let isChecked = this.selectionData.some(selectedItem =>
            selectedItem.id === good.id
          );
          good.checked = isChecked;
        } else {
          good.checked = false;
        }
      });

      let cartTotalChecked = this.selectionData.length;
      this.isAllChecked = this.cartList.length === cartTotalChecked;
     console.log("AAAAAAA",this.selectionData)
      this.calTotalPrice();
    },
    // 	全部删除
    delAll() {
      let _this = this;
      _this
        .$confirm("确定要删除全部商品吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(function () {
          // 这里只是前端删除
          _this.cartList = [];
          _this.isAllChecked = false;
          // 删除后需要重新获取数据刷新页面
          //   _this.getList();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 单个删除
    delGood(id) {
      let _this = this;
      if (!id) {
        _this.$message.error("商品有误，请刷新后重试");
        return;
      }
      _this
        .$confirm("确定要删除此商品吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(function () {
          let goodIndex = 0;
          _this.cartList.forEach((item, index) => {
            if (item.id === id) {
              goodIndex = index;
            }
          });
          _this.cartList.splice(goodIndex, 1);
          //   _this.getList();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //全选
    checkAll() {
      // 如果全选
      if (this.isAllChecked) {
        this.getList();
        // 将购物车列表复制给被选择数组
        this.selectionData = JSON.parse(JSON.stringify(this.cartList));
        this.cartList.forEach((cItem, cIndex) => {
          this.cartList[cIndex]["checked"] = true;
        });
        if (this.$refs.cartTable) {
          this.$refs.cartTable.clearSelection();
          // el table全部选中
          this.$refs.cartTable.toggleAllSelection();
        }
      } else {
        this.cartList.forEach((cItem, cIndex) => {
          this.cartList[cIndex]["checked"] = false;
        });
        this.selectionData = [];
        if (this.$refs.cartTable) {
          // el table清空选中
          this.$refs.cartTable.clearSelection();
        }
      }
      this.calTotalPrice();
    },
  },
};
</script>

<style>
/* 购物车web端 */
.cart-web {
  width: 100%;
  height: auto;
  background: #f8e7e7;
}

/* 购物车移动端 */
.cart-phone {
  width: 100%;
  height: calc(100vh - 135px);
  background: #f8e7e7;
}

/* 购物车头部 */
.cart-header {
  width: 100%;
  height: 58px;
  padding: 11px 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
}

.cart-header .cart-header-contain {
  width: 80%;
  display: flex;
  align-items: center;
}

/* 购物车标题 */
.cart-header .cart-header-contain .cart-title {
  font-size: 18px;
  font-weight: 500;
}

.cart-contain {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 24px;
}

.cart-table-container {
  width: 80%;
  border-radius: 25px;
  padding: 10px 30px;
  background: #fff;
  min-height: calc(100vh - 130px);
  position: relative;
}

.cart-filter-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.cart-filter-bar .switch-cart {
  overflow: hidden;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  height: 72px;
  line-height: 72px;
}

.cart-filter-bar .cart-sum {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.cart-sum .total-symbol {
  font-weight: 400;
  margin-right: 12px;
  font-size: 24px;
  color: #ff5000;
}

/* 激活状态的支付按钮 */
.cart-sum .pay-btn-active {
  width: 74px;
  height: 42px;
  line-height: 42px;
  color: #fff;
  background: #ff5000;
  border-radius: 21px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
}

/* 未激活状态的支付按钮 */
.cart-sum .pay-btn-inactive {
  width: 74px;
  height: 42px;
  line-height: 42px;
  color: #fff;
  background: #a3a3a3;
  border-radius: 21px;
  text-align: center;
  cursor: not-allowed;
  text-decoration: none;
  font-size: 16px;
}

.inactive-btn {
  background: #aaa !important;
  color: #fff;
  cursor: not-allowed !important;
}

.cart-list-content {
  max-height: 100vh;
  padding-bottom: 72px;
  overflow-y: auto;
}

/* 购物车底部栏 */
.cart-filter-bar-bottom {
  width: 95%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  background: #fff;
  z-index: 999;
}

.cart-filter-bar-bottom .bar-bottom-left {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 全选 */
.cart-filter-bar-bottom .all-check {
  overflow: hidden;
  color: #000;
  height: 72px;
  line-height: 72px;
  font-size: 12px;
}

.cart-filter-bar-bottom .all-check .all-check-checkbox {
  margin-right: 10px;
}

/* 全部删除 */
.cart-filter-bar-bottom .all-del {
  margin-left: 20px;
}

.cart-filter-bar-bottom .cart-sum {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.cart-sum .pay-text {
  margin: 0 12px;
}

.cart-sum .total-text {
  margin: 0 0 0 12px;
}

.cart-box {
  padding: 10px 0;
}

.cart-list-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 20px;
  background-color: #fff;
  padding: 8px 0;
}

.cart-list-item .cart-item-info {
  display: flex;
  align-items: center;
  padding: 0 0 0 15px;
}

.cart-list-item .cart-item-left {
  width: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.cart-list-item .left-check {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8%;
}

/* 单个选择按钮 */
.cart-list-item .left-check .checkbox {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #b9b9b9;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 单个选择按钮选中 */
.cart-list-item .left-check .checkbox .selected-check {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: red;
}

.cart-item-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
}

.cart-item-opera {
  display: flex;
  align-items: center;
}

/* 删除按钮 */
.del-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 17px;
  color: red;
}

.cart-item-right .cart-item-info-content {
  margin-right: 20px;
  width: 70px;
}

.cart-item-right .goods-name {
  width: 100%;
  font-size: 15px;
  color: #333333;
  margin-top: 3px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cart-item-right .numbers {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
}

.cart-item-right .numbers .price {
  font-size: 14px;
  line-height: 25px;
  color: #ff0000;
}

.bottom-all {
  height: 50px;
  width: 100%;
  padding: 0 2%;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fdfdfd;
  z-index: 11;
  border-top: 1px solid #f8f8f8;
}

.bottom-all .left {
  float: left;
  width: 28vw;
  font-size: 14px;
  position: relative;
}

.bottom-all .left .text {
  position: absolute;
  left: 35px;
  top: 50%;
  transform: translateY(-52%);
  color: #333333;
}

.bottom-all .del-text {
  color: red;
  position: absolute;
  left: 80px;
  top: 47%;
  transform: translateY(-52%);
}

.bottom-all .left-check {
  padding-left: 8px;
  flex-shrink: 0;
  height: 50px;
  margin-right: 8px;
  align-items: center;
  position: relative;
  display: flex;
}

.bottom-all .rights {
  width: 40vw;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bottom-all .settlement-inactive {
  padding: 0 4px;
  border-radius: 16px;
  width: 18vw;
  height: 35px;
  line-height: 35px;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  margin-right: 20px;
  cursor: not-allowed;
  background-color: #a3a3a3;
}

.bottom-all .settlement-active {
  padding: 0 4px;
  border-radius: 16px;
  width: 18vw;
  height: 35px;
  line-height: 35px;
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  margin-right: 20px;
  background-color: #ff5000;
}

/* 购物车为空的样式 */
.cart-no-data {
  text-align: center;
}

.total-pay-count {
  font-size: 24px;
  color: #ff5000;
}

@media (max-width: 700px) {

  /* 弹窗 */
  .el-message-box {
    width: 300px !important;
  }

  /* el-input-number样式 */
  .el-input-number {
    width: 100px !important;
    line-height: 28px !important;
  }

  .el-input-number .el-input__inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .el-input__inner {
    height: 30px !important;
  }

  .el-input-number__decrease,
  .el-input-number__increase {
    width: 20px !important;
  }
}


/**顶部 */
.new {
	background-color: #3BB77E;
	color: #ffffff;
	margin-top: 20px;
	border: 1px solid #3BB77E;
	border-radius: 4px;

}

.cuxiao {
	background-color: orange;
	color: #ffffff;
	margin-top: 20px;
	border: 1px solid #3BB77E;
	border-radius: 4px;

}

.gouwuche {
	width: 85px;
	height: 36px;
	border: 1px solid #3BB77E;
	background-color: #DEF9EC;
	border-radius: 4px;
	display: inline-block;
	margin-left: 26px;

	span {
		font-size: 18px;
		color: #3BB77E;
		margin-left: 7px;
		margin-top: 10px;
	}

	i {
		font-size: 18px;
		color: #3BB77E;
		margin-left: 7px;
		margin-top: 10px;
	}
}

.gouwuche:hover {
	background-color: #3BB77E;
	transform: translateY(-2px);

	span {

		color: white;
	}

	i {
		color: white;
	}
}

.allspan {
	/* 行内元素 转换为 块级元素 */
	display: block;
	width: auto;
	height: auto;
	color: black;
}

.time {
	font-size: 13px;
	color: #999;
}

.time2 {
	font-size: 13px;
	color: #999;
}

.bottom {
	margin-top: 13px;
	line-height: 12px;
}

.button {
	padding: 0;
	float: right;
}

.image {
	width: 100%;
	display: block;
	cursor: pointer;
}

.image2 {
	width: 100%;
	display: block;
	cursor: pointer;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
}

.clearfix:after {
	clear: both
}

.clearfix2:before,
.clearfix2:after {
	display: table;
	content: "";
}

.clearfix2:after {
	clear: both
}

.card-1 {
	margin-bottom: -90px;
}

.section-title2 {
	height: 100px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: end;
	margin-bottom: -150px;
	position: relative;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.section-title2 .title2 {
	height: 100px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row;
	flex-flow: row;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.section-title2 h3 {
	font-weight: 700;
	font-size: 32px;
	margin-right: 30px;
	margin-top: 300px;
}

.section-title2 a.show-all2 {
	font-size: 16px;
	color: #7E7E7E;
	text-decoration: none;
	cursor: pointer;
	margin-top: 20px;
}

.section-title3 {
	height: 100px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: end;
	margin-bottom: -150px;
	position: relative;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.section-title3 .title3 {
	height: 100px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row;
	flex-flow: row;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.section-title3 h3 {
	font-weight: 700;
	font-size: 32px;
	margin-right: 30px;
	margin-top: 300px;
}

.section-title3 a.show-all3 {
	font-size: 16px;
	color: #7E7E7E;
	text-decoration: none;
	cursor: pointer;
	margin-top: 20px;
}




.type-a {
	margin-bottom: 20px;
	border: 1px solid black;

	a:hover {
		color: #3BB77E;
		transition: color 0.3s ease;
	}
}

.type-a:hover {
	border: 1px solid #3BB77E;
	background-color: white;
	transform: translateY(-2px);
}

.type-a2 {
	margin-bottom: 20px;
	border: 1px solid black;

	a:hover {
		color: #3BB77E;
		transition: color 0.3s ease;
	}
}

.type-a2:hover {
	border: 1px solid #3BB77E;
	background-color: white;
	transform: translateY(-2px);
}

.zz {
	color: #253D4E;
}

.zz:hover {
	color: #3BB77E;
}

.show-all:hover {

	color: #3BB77E;
}

.el-row {
	margin-bottom: 20px;

	&:last-child {
		margin-bottom: -230px;
	}
}



.section-title {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: end;
	margin-bottom: -32px;
	position: relative;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.section-title .title {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row;
	flex-flow: row;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.section-title h3 {
	font-weight: 700;
	font-size: 32px;
	margin-right: 30px;
	margin-top: -22px;
}

.section-title a.show-all {
	font-size: 16px;
	color: #7E7E7E;
	text-decoration: none;
	cursor: pointer;
	margin-top: 20px;
}


.el-carousel__item h3 {
	color: #ffffff;
	font-size: 18px;
	opacity: 0.75;
	line-height: 300px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #ffffff;
}

.el-carousel__item:nth-child(2n+1) {
	background-color: #ffffff;
}

p:last-child {
	margin-bottom: 0;
}

.header-wrap-2-right {
	margin-left: 526px;
}

.hotline p {
	color: #3BB77E !important;
}

.header-wrap-2-right-span {
	font-weight: 500;
	font-size: 12px;
	font-family: "Lato", sans-serif;
	color: #7E7E7E;
	display: block;
	letter-spacing: .9px;
	margin-top: 25px;
	margin-right: 20px;
}

p {
	font-size: 1rem;
	font-weight: 400;
	line-height: 24px;
	margin-bottom: 5px;
	color: #7E7E7E;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	margin-top: 0;
	margin-bottom: 1rem;
	margin-right: -155px;
}

.hotline p {
	color: #3BB77E;
	font-size: 26px;
	font-weight: 700;
	font-family: "Quicksand", sans-serif;
	display: block;
	line-height: 1;
}

.header-wrap-2 {
	height: 74px;
	width: 1564px;
	border-top: 1px solid darkgray;
	border-bottom: 1px solid darkgray;
	margin-top: 110px;
	margin-left: -1543px;
}

.header-right {
	margin-left: -70px;
}

.header-right-icon {
	margin-left: 100px;

	label {
		color: darkgray;
	}

	a {
		margin-left: 3px;
		padding: 3px;
	}
}

a {
	text-decoration: none;
	color: #333;
}

.header-right-input {
	background-color: #ffffff;
	margin-left: 160px;
}

.header-wrap {
	margin-top: -80px;
}

#Homepage {
	height: 100%;
}

.el-header,
.el-footer {
	background-color: #ffffff;
	color: #333;
	text-align: center;
	line-height: 60px;
	/* 
		在flex 布局的容器中，
		可以设置justify-content: space-between;实现两对齐
		*/
	display: flex;
	justify-content: space-between;
	/* 当容器是flext，可以设置 align-items: center */
	align-items: center;

	div {
		display: flex;
		align-items: center;
	}

	span {
		margin-left: 20px;
	}
}

.el-main {
	background-color: white;
	color: white;
	text-align: center;
	line-height: 160px;
}

body>.el-container {
	margin-bottom: 40px;
}
</style>
